<template>
  <div class="common-layout">
    <el-container>
      <el-header v-if="showHeader">
        <span class="title">{{title}}</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <FieldPanel :hideField="hideField"></FieldPanel>
        </el-aside>
        <el-main>
          <FormWidget class="widget-main"></FormWidget>
        </el-main>
        <el-aside width="300px">
          <PanelSettion v-bind="$attrs"></PanelSettion>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import FieldPanel from './FieldPanel/index.vue'
import FormWidget from './FormWidget/index.vue'
import PanelSettion from './PanelSettion/index.vue'

const props =withDefaults(defineProps<{
  title?:string
  showHeader?:boolean
  hideField?:string
}>(),{
  title:'内容设计平台',
  showHeader:true
})
</script>

<style scoped lang="scss">
.common-layout {
    height: 100%;
    position: relative;
    max-width: 100%;
  .widget-main {
    background: #f5f5f5;
    max-height: 80vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding:vw(10);
    border-radius: 4px;
  }

  .title {
    font-family: 'YouSheBiaoTiHei';
    letter-spacing: 4px;
    box-sizing: border-box;
    color: #1890ff;
    font-size: 1.6666666667vw;
    text-shadow: 1px 6px 4px #d2d9e6;
  }
}
</style>
